<template>
  <div id="app">
    <router-view></router-view>
    <!--仿todolist-->
    <!--<div class="addItem">
      <input type="text" v-model="newItem"/>
      <button v-on:click="addNewItem()">add</button>
      <ol>
          {{item}}
          <button v-on:click="dele(index)">dele</button>
        </li>
      </ol>
    </div>-->
    <!-- <HelloWorld :logo="logoMsg"></HelloWorld>
    <login @transferUser='getUser'></login>
    <br/>-->
    <!--绑定下拉框-->
    <!-- <div id='example-5'>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>-->
    <!--  <div class="addItem">
    <input type="text" v-model="newItem"/>
    <button v-on:click="addNewItem()">add</button>
      <br/>
    <ol>
      <div>待完成：{{inputData.length}}</div>
      <br/>
      <li v-for="(item,index) in inputData" :key="item.id">
        {{item}}
        <button v-on:click="dele(index)">dele</button>
        <button v-on:click="complete(index)">complete</button>
      </li>
      <br/>
      <div>已完成:{{completeItem.length}}</div>
      <br/>
      <li v-for="(item,index) in completeItem" :key="item.id">
        <del>{{item}}</del>
        <button v-on:click="deleComplete(index)">dele</button>
      </li>
    </ol>
  </div>-->
 <!--   <div class="root">
      姓:<input v-model="firstName"/>
      名:<input v-model="lastName"/>
      <div>{{fullName}}</div>
      <div>{{count}}</div>
    </div>-->
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/login'
import test from '@/components/test'

export default {
  name: 'App',
  data () {
    return {
      logoMsg: 'WiseWrong',
      user: '',
      inputData: [],
      newItem: '',
      selected: '',
      completeItem: [],
      comItem: '',
      firstName: '',
      lastName: '',
      count: 0
    }
  },
  methods: {
    getUser (msg) {
      this.user = msg
    },
    addNewItem: function () {
      this.inputData.push(this.newItem)
      this.newItem = ''
    },
    dele: function (index) {
      this.inputData.splice(index, 1)
    },
    complete: function (index) {
      var comItem = this.inputData[index]
      this.inputData.splice(index, 1)
      this.completeItem.push(comItem)
    },
    deleComplete: function (index) {
      this.completeItem.splice(index, 1)
    }

  },
  components: {
    login,
    HelloWorld,
    test
  },
  computed: {
    fullName: function () {
      return this.firstName + '' + this.lastName
    }
  },
  watch: {
    fullName: function () {
      this.count++
    }
  }
}
</script>

<style>
*{
  font-size: 22px;
}
</style>
